<template>
  <div id="today-cansus"></div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: "TodayCensus",
    components: {},
    data() {
      return {
        data: [220, 182, 191, 234, 290, 330, 310]
      }
    },

    computed: {
      ...mapState(['staffDataInfo'])
    },

    methods: {
      renderTodayCensus() {
        let div = document.getElementById('today-cansus');
        let charts = this.echarts.init(div);

        charts.setOption({
          color: ['#36acf8'],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              lineStyle: { type: "dotted", opacity: 0.5 }
            },
            padding: [8, 14],
            backgroundColor: "rgba(255 ,255 ,255 ,1)",
            borderColor: "#eee",
            borderWidth: "1",
            textStyle: { color: "#666" },
            extraCssText: "box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);",
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '0%',
            top: '20%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            axisTick: {
              alignWithLabel: true,
              show: false,
              length: 3,
              lineStyle: {
                width: 1,
                type: "solid"
              }
            },
            axisLabel: {
              show: true,
              textStyle: { color: "rgba(0, 0, 0, 0.5)" },
              interval: 0,
              rotate: 40
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(0, 0, 0, 0.4)",
                width: 1,
                type: "solid"
              }
            },
            data: this.staffDataInfo.dayOnlineList.xAxis
          }],
          yAxis: [{
            type: 'value',
            // 分隔线样式设置
            splitLine: {
              show: true,
              lineStyle: {
                color: '#e0e0e0',
                type: "dashed"
              }
            },
            axisTick: {
              show: false,
              length: 3,
              lineStyle: {
                width: 1,
                type: "solid"
              }
            },
            axisLabel: {
              show: true,
              formatter: '{value}',
              textStyle: {
                color: "rgba(0, 0, 0, 0.5)",
                lineHeight: 26
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(0, 0, 0, 0.4)",
                width: 1,
                type: "dashed"
              }
            },
          }],
          series: [{
            name: '今日在场人数统计',
            type: 'bar',
            barWidth: '22px',
            data: this.staffDataInfo.dayOnlineList.yAxis,
            itemStyle: {
              normal: {
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4,
              }
            },
            label: {
              normal: {
                show: true,
                lineHeight: 30,
                width: 70,
                height: 30,
                backgroundColor: 'rgba(0,160,221,0.1)',
                borderRadius: 200,
                position: ['-8', '-60'],
                distance: 1,
                formatter: [
                  '  {d|●}',
                  '  {c}\n',
                  '     {b|}'
                ].join(''),
                rich: {
                  d: { color: '#3CDDCF' },
                  a: { color: '#6f6f6f', align: 'center' },
                  b: {
                    height: 20,
                    borderWidth: 1.8,
                    borderColor: 'rgba(0,160,221,0.5)',
                    align: 'left',
                  },
                }
              }
            }
          }]
        })
      }
    }
  }
</script>

<style scoped>
  #today-cansus{
    width: 100%;
    height: 100%;
  }
</style>
